<!DOCTYPE html>
<html lang="en">
<head>
	<title>dom.js :: Unit Tests :: ProtoLove</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../lib/qunit/qunit.js"></script>
	<script type="text/javascript" src="../src/dom.js"></script>
	<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
</head>
<body>

<div id="unit-output">
	<h1 id="qunit-header">ProtoLove Unit Tests - dom.js</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"><li></li></ol>
</div>
<div id="unit-page-content">


					
	<h1 id="h1">Title</h1>

	<div id="event-box">
		<p id="p1" class="intro">This is the intro</p>
		<p id="p2" class="meat">This is the meat</p>
		<p id="p3" class="meat">And some more meat</p>
		<p id="p4" class="meat">And some more meat</p>
		<p id="p5" class="conclusion">This is the conclusion</p>
	</div>

	<blockquote>Blockquote with no ID</blockquote>

	<p id="p6" class="banana">banana</p>
	<p id="p7" class="apple banana">apple banana</p>
	<p id="p8" class="watermelon apple banana">watermelon apple banana</p>
	<p id="p9">no class</p>





</div>

<script type="text/javascript">

	with (QUnit) {

		test('.extend() - get element', function() {
			var h1 = document.getElementById('h1');
			var obj = {};

			equal($('h1'), h1, '$ using string');
			strictEqual($(h1), h1, '$ using element');
			strictEqual($(document), document, '$ on document');
			strictEqual($(obj), obj, '$ on object');
			strictEqual($($(h1)), h1, 'nested calls');
		});

		test('.extend() - adding methods', function() {
			var obj = {};

			same($('h1').identify, Element.Methods.identify, 'extension of element');
			same($(obj).identify, Element.Methods.identify, 'extension of object');
			same($(document).identify, Element.Methods.identify, 'extension of document');
			var identify = obj.identify;
			Element.addMethods({identify:function(){}});
			same(identify, $(obj).identify, 'extension happens only once');
			// put it back
			Element.addMethods({identify:identify});
		});

		test('#show(), #hide()', function() {
			var p3 = $('p3');
			var p4 = $('p4');

			p3.hide();
			equal(p3.style.display, 'none', '#hide()');

			Element.hide(p4);
			equal(p4.style.display, 'none', '.hide()');

			p3.show();
			equal(p3.style.display, '', '#show()');

			Element.show(p4);
			equal(p4.style.display, '', '.show()');
		});

		test('#identify()', function() {
			var h1 = $('h1');
			var blockquote = document.getElementsByTagName('blockquote')[0];

			equal($('h1').identify(), 'h1', 'id exists');
			equal($(document.body).identify(), "anonymous_element_1", 'new id');
			equal($(document.body).identify(), "anonymous_element_1", 'reuse id');
			equal($(blockquote).identify(), "anonymous_element_2", 'new id 2');
		});

		test('#observe(), #stopObserving()', function() {
			var clicked = false, observer = function() {
				clicked = true;
			};
			$('h1').observe('click', observer);
			triggerEvent($('h1'), 'click');
			equal(clicked, true, 'simple click handler added');

			clicked = false;
			$('h1').stopObserving('click', observer);
			triggerEvent($('h1'), 'click');
			equal(clicked, false, 'click handler removed');
		});

		test('#delegate()', function() {
			var clicked = false;
			$('event-box').delegate('click', 'p#p1.intro', function(event) {
				clicked = true;
			});
			triggerEvent($('p1'), 'click');
			equal(clicked, true, 'tag, id and class');

			clicked = false;
			$('event-box').delegate('click', 'p#p2', function(event) {
				clicked = true;
			});
			triggerEvent($('p2'), 'click');
			equal(clicked, true, 'tag and id');

			clicked = false;
			$('event-box').delegate('click', 'p.meat', function(event) {
				clicked = true;
			});
			triggerEvent($('p3'), 'click');
			equal(clicked, true, 'tag and class');

			clicked = false;
			$('event-box').delegate('click', '#p4', function(event) {
				clicked = true;
			});
			triggerEvent($('p4'), 'click');
			equal(clicked, true, 'id only');

			clicked = false;
			$('event-box').delegate('click', '.conclusion', function(event) {
				clicked = true;
			});
			triggerEvent($('p5'), 'click');
			equal(clicked, true, 'class only');
		});

		test('#getStyle(), #setStyle()', function() {
			var p5 = $('p5');
			p5.setStyle('letter-spacing', '3px');
			equal(p5.style.letterSpacing, '3px', 'set dash separated');
			equal(p5.getStyle('letter-spacing'), '3px', 'get dash separated');

			p5.setStyle('fontSize', '14px');
			equal(p5.style.fontSize, '14px', 'set camel case');
			equal(p5.getStyle('fontSize'), '14px', 'get camel case');

			p5.setStyle('line-height: 18px; z-index: 42;');
			equal(p5.style.lineHeight, '18px', 'set with css string');
			equal(p5.style.zIndex, '42', 'set with css string 2');
		});

		test('#hasClassName()', function() {
			var p6 = $('p6');
			var p7 = $('p7');
			var p8 = $('p8');

			equal(p6.hasClassName('ban'), false, 'partial string');
			equal(p6.hasClassName('banana'), true, 'only class');
			equal(p7.hasClassName('banana'), true, 'last class');
			equal(p7.hasClassName('apple'), true, 'first class');
			equal(Element.hasClassName('p8','apple'), true, 'middle class');
		});

		test('#addClassName(), #removeClassName()', function() {
			var p6 = $('p6');
			var p7 = $('p7');
			var p8 = $('p8');
			var p9 = $('p9');

			p6.removeClassName('banana');
			equal(p6.hasClassName('banana'), false, 'remove one of one');
			p7.removeClassName('banana');
			equal(p7.hasClassName('banana'), false, 'remove one of two');
			p8.addClassName('grapefruit');
			equal(p8.hasClassName('grapefruit'), true, 'another class');
			p9.addClassName('kiwi');
			equal(p9.className, 'kiwi', 'no classes');
		});

		test('.build()', function() {
			var div1 = Element.build('div');
			equal(div1.nodeType, 1, 'tag name - is node');
			equal(div1.tagName.toLowerCase(), 'div', 'tag name - has correct tag');
			equal(div1.show, Element.Methods.show, 'tag name - is extended');

			var div2 = Element.build('<div class="hi">');
			equal(div2.className, 'hi', 'empty tag - has attribute');
			
			var div3 = Element.build('p', {id:'myp',title:'mytitle'});
			equal(div3.id, 'myp', 'attribute hash - id');
			equal(div3.title, 'mytitle', 'attribute hash - title');

			var div4 = Element.build('p', {'class':'myclass'}, Element.build('span'));
			equal(div4.className, 'myclass', 'attribute hash - class');
			equal(div4.firstChild.tagName.toLowerCase(), 'span', 'child added');

			var helloHtml = '<span>hello <strong>world</strong></span>';
			var div5 = Element.build('p', Element.build(helloHtml));
			equal(div5.firstChild.tagName.toLowerCase(), 'span', 'child added - no attributes');
			equal(div5.innerHTML.toLowerCase(), helloHtml, 'correct innerHTML');

			var div6 = Element.build('p', {}, [Element.build('<a href="here">'), Element.build('<a href="there">')]);
			equal(div6.childNodes[0].tagName.toLowerCase(), 'a', 'array of children 1');
			equal(div6.childNodes[1].tagName.toLowerCase(), 'a', 'array of children 2');

			var div6 = Element.build('p', [Element.build('<a href="here">'), Element.build('<a href="there">')]);
			equal(div6.childNodes[0].tagName.toLowerCase(), 'a', 'array of children 1 - no attributes');
			equal(div6.childNodes[1].tagName.toLowerCase(), 'a', 'array of children 2 - no attributes');

		});

	}

</script>

</body>
</html>